<?xml version="1.0" encoding="utf-8"?>
<!-- saved from url=(0016)http://localhost -->
<html><head><meta charset="utf-8"/><meta content="IE=edge" http-equiv="X-UA-Compatible"/><title>GOWEB UML设计图</title><style>
        body{
            margin: 0;
        }
        #content-info{
            width: auto;
            margin: 0 auto;
            text-align: center;
        }
        #author-info{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #title{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-top: 10px;
            margin-bottom: 2px;
            font-size: 34px;
            color: #505050;
        }
        .text{
            white-space:nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 2px;
            font-size: 20px;
            color: #8c8c8c;
        }
        #navBar{
            position: fixed;
            right:0;
            bottom: 0;
            background-color: #f0f3f4;
            overflow-y: auto;
            text-align: center;
        }
        #svg-container{
            width: 100%;
            min-width: 0;
            margin: 0 10px;
        }
        #nav-thumbs{
            padding: 0 5px;
        }
        .nav-thumb{
            position: relative;
            margin: 10px auto;
        }
        .nav-thumb >p{
            text-align: center;
            font-size: 12px;
            margin: 4px 0 0 0;
        }
        .nav-thumb >div{
            position: relative;
            display: inline-block;
            border: 1px solid #c6cfd5;
        }
        .nav-thumb img{
            display: block;
        }
        .nav-thumb span{
            pointer-events: none;
        }
        #main-content{
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #d0cfd8;
            display: flex;
            height: auto;
            flex-flow: row wrap;
            text-align:center;
        }
        #svg-container >svg{
            display: block;
            margin:10px auto;
            margin-bottom: 0;
        }
        #copyright{
            bottom: 0;
            left: 50%;
            margin: 5px auto;
            font-size: 16px;
            color: #515151;
        }
        #copyright >a{
            text-decoration: none;
            color: #77C;
        }
        .number{
            position: absolute;
            top:0;
            left:0;
            border-top:22px solid #76838f;
            border-right: 22px solid transparent;
        }
        .pagenum{
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: -23px;
            left: 2px;
        }
        #navBar::-webkit-scrollbar{
            width: 8px;
            background-color: #f5f5f5;
        }
        #navBar::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            border-radius: 8px;
            background-color: #fff;
        }
        #navBar::-webkit-scrollbar-thumb{
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            background-color: #6b6b70;
        }
        #navBar::-webkit-scrollbar-thumb:hover{
            background-color: #4a4a4f;
        }
        .nav-thumb >div:hover{
            box-shadow:1px 1px 4px rgba(0,0,0,.4);
        }
        .selected .number{
            border-color: #08a1ef transparent;
        }
</style></head><body><div id="main-area"><div id="content-info"><div id="title">GOWEB&nbsp;&nbsp;UML设计图</div><div id="author-info"><div id="author-name" class="text">xiangxu</div><div id="share-time" class="text">2023-07-11</div></div></div><div id="main-content"><div id="svg-container"><svg xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRadio="xMinYMin meet" viewBox="0 0 1123 1587" width="1122" id="page1" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/2000/svg" height="1587"><defs/><rect stroke="#808080" width="1123" x="0" fill="#ffffff" y="0" height="1587"/><g id="shape1" transform="translate(38.000000,38.000000)"><path d="M.0,.0L510.0,.0L510.0,85.0L.0,85.0L.0,.0zM.0,50.0L510.0,50.0L.0,50.0z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,85.0L.0,85.0L.0,.0zM.0,50.0L510.0,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="209.5" y="22.0">&lt;&lt;interface>></tspan><tspan x="213.0" y="37.0">http.Handler</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="72.0">ServerHTTP(writer, *Request)</tspan></text></g><g id="shape2" transform="translate(592.500000,38.000000)"><path d="M.0,.0L289.2,.0L289.2,25.0L482.0,25.0L482.0,170.0L.0,170.0L.0,.0z" fill-rule="nonzero" fill="#bcbcbc"/><path stroke="#323232" d="M.0,.0L289.2,.0L289.2,25.0L482.0,25.0L482.0,170.0L.0,170.0L.0,.0zM.0,25.0L304.2,25.0L.0,25.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="41.0">NewRoute() *Router</tspan><tspan x="4.0" y="71.0">NewHTTPServer(opts ...HTTPServerOption) *HTTPServer</tspan><tspan x="4.0" y="86.0">ServerWithRenderEngine(engine RenderEngine) HTTPServerOption</tspan><tspan x="4.0" y="101.0">ServerWithMiddleware(mdls ...Middleware) HTTPServerOption</tspan><tspan style="font-family:微软雅黑;font-size:9.00pt" x="4.0" y="132.0">HandleFunc func(ctx *Context)</tspan><tspan x="4.0" y="148.0">Middleware func(HandleFunc) HandleFunc</tspan><tspan x="4.0" y="163.0">HTTPServerOption func(server *HTTPServer)</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.1" y="17.0">web</tspan></text></g><g id="shape3" transform="translate(38.000000,151.000000)"><path d="M.0,.0L510.0,.0L510.0,115.0L.0,115.0L.0,.0zM.0,50.0L510.0,50.0L.0,50.0z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,115.0L.0,115.0L.0,.0zM.0,50.0L510.0,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="209.5" y="22.0">&lt;&lt;interface>></tspan><tspan x="234.0" y="37.0">Server</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="72.0">http.Handler</tspan><tspan x="4.0" y="87.0">Start(string) error</tspan><tspan x="4.0" y="102.0">AddRoute(string, string, HandleFunc, ...Middleware)</tspan></text></g><g id="shape4" transform="translate(38.000000,295.908000)"><path d="M.0,.0L510.0,.0L510.0,224.2L.0,224.2L.0,.0zM.0,37.5L510.0,37.5L.0,37.5zM.0,129.2L510.0,129.2L.0,129.2z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,224.2L.0,224.2L.0,.0zM.0,37.5L510.0,37.5L.0,37.5zM.0,129.2L510.0,129.2L.0,129.2z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="220.0" y="23.3">HTTPServer</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="65.4">*Router</tspan><tspan x="4.0" y="80.4">mdls []Middleware</tspan><tspan x="4.0" y="95.4">log func(msg string, args ...any)</tspan><tspan x="4.0" y="110.4">RenderEngine RenderEngine</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="151.2">(h *HTTPServer) flushResp(ctx *Context)</tspan><tspan x="4.0" y="166.2">(h *HTTPServer) serve(ctx *Context)</tspan><tspan x="4.0" y="181.2">(h *HTTPServer) Get(path string, handler HandleFunc)</tspan><tspan x="4.0" y="196.2">(h *HTTPServer) Post(path string, handler HandleFunc)</tspan><tspan x="4.0" y="211.2">(h *HTTPServer) Use(method string, pattern string, mdls ...Middleware)</tspan></text></g><g id="shape5" transform="translate(294.457000,151.000000)"><path stroke="#191919" d="M.0,.0L.0,-22.0" stroke-width="1" fill="none"/><path stroke-linecap="round" stroke="#191919" d="M-3.0,-22.0L.0,-28.0L3.0,-22.0L-3.0,-22.0" stroke-width="1" fill="#191919"/></g><g id="shape6" transform="translate(293.000000,295.908000)"><path stroke="#191919" d="M.0,.0L.0,-23.0" stroke-width="1" fill="none"/><path stroke-linecap="round" stroke="#191919" d="M-3.0,-23.0L.0,-29.0L3.0,-23.0L-3.0,-23.0" stroke-width="1" fill="#191919"/></g><g id="shape7" transform="translate(548.000000,352.627000)"><path stroke="#191919" d="M18.7,.0L28.0,.0L28.0,275.0L.0,275.0" stroke-width="1" fill="none"/><path stroke-linecap="round" stroke="#191919" d="M.0,.0L9.4,5.4L18.7,.0L9.4,-5.4L.0,.0" stroke-width="1" fill="#191919"/></g><g id="shape8" transform="translate(38.000000,564.500000)"><path d="M.0,.0L510.0,.0L510.0,200.5L.0,200.5L.0,.0zM.0,41.8L510.0,41.8L.0,41.8zM.0,83.7L510.0,83.7L.0,83.7z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,200.5L.0,200.5L.0,.0zM.0,41.8L510.0,41.8L.0,41.8zM.0,83.7L510.0,83.7L.0,83.7z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="234.0" y="25.4">Router</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="67.2">trees map[string]*Node</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="109.1">(r *Router) AddRoute(method string, path string, handler HandleFunc, </tspan><tspan x="4.0" y="124.1">mdls ...Middleware)</tspan><tspan x="4.0" y="139.1">(r *Router) AddRouteMiddleware(method string, path string, mdls </tspan><tspan x="4.0" y="154.1">...Middleware)</tspan><tspan x="4.0" y="169.1">(r *Router) FindRoute(method, path string) (*MatchInfo, bool)</tspan><tspan x="4.0" y="184.1">(r *Router) FindMdls(root *Node, segments []string) []Middleware</tspan></text></g><g id="shape9" transform="translate(38.000000,995.118000)"><path d="M.0,.0L510.0,.0L510.0,508.2L.0,508.2L.0,.0zM.0,37.5L510.0,37.5L.0,37.5zM.0,416.5L510.0,416.5L.0,416.5z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,508.2L.0,508.2L.0,.0zM.0,37.5L510.0,37.5L.0,37.5zM.0,416.5L510.0,416.5L.0,416.5z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="241.0" y="23.3">Node</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="61.5">// 当前节点的完整路由</tspan><tspan x="4.0" y="76.5">route string</tspan><tspan x="4.0" y="108.5">// 当前节点的匹配规则</tspan><tspan x="4.0" y="123.5">path string</tspan><tspan x="4.0" y="155.5">// 静态匹配子节点</tspan><tspan x="4.0" y="170.5">children map[string]*Node</tspan><tspan x="4.0" y="202.5">// 参数路径匹配子节点</tspan><tspan x="4.0" y="217.5">param *Node</tspan><tspan x="4.0" y="249.5">// 通配符匹配子节点</tspan><tspan x="4.0" y="264.5">wildcard *Node</tspan><tspan x="4.0" y="296.5">// 正则匹配（路径中务必包含参数）子节点</tspan><tspan x="4.0" y="311.5">regmod *regexp.Regexp</tspan><tspan x="4.0" y="326.5">regexp *Node</tspan><tspan x="4.0" y="356.5">handler HandleFunc</tspan><tspan x="4.0" y="388.5">// 注册到路由上的 Middlewares</tspan><tspan x="4.0" y="403.5">mdls []Middleware</tspan></text></g><g id="shape10" transform="translate(38.000000,785.500000)"><path d="M.0,.0L510.0,.0L510.0,167.0L.0,167.0L.0,.0zM.0,35.0L510.0,35.0L.0,35.0zM.0,132.0L510.0,132.0L.0,132.0z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L510.0,.0L510.0,167.0L.0,167.0L.0,.0zM.0,35.0L510.0,35.0L.0,35.0zM.0,132.0L510.0,132.0L.0,132.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="223.5" y="22.0">MatchInfo</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="57.0">node  *Node</tspan><tspan x="4.0" y="72.0">param map[string]string</tspan><tspan x="4.0" y="104.0">// 注册到路由上的 Middlewares</tspan><tspan x="4.0" y="119.0">mdls []Middleware</tspan></text></g><g id="shape11" transform="translate(592.176000,656.500000)"><path d="M.0,.0L482.0,.0L482.0,85.0L.0,85.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" fill-rule="nonzero" fill="#e6dfd0"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,85.0L.0,85.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="195.5" y="22.0">&lt;&lt;interface>></tspan><tspan x="199.0" y="37.0">RenderEngine</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="72.0">Render(ctx context.Context, tmpl string, data any) ([]byte, error)</tspan></text></g><g id="shape12" transform="translate(592.500000,777.305000)"><path d="M.0,.0L482.0,.0L482.0,105.0L.0,105.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,70.0L482.0,70.0L.0,70.0z" fill-rule="nonzero" fill="#e6dfd0"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,105.0L.0,105.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,70.0L482.0,70.0L.0,70.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="192.0" y="22.0">GoRenderEngine</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="57.0">Template *template.Template</tspan></text></g><g id="shape13" transform="translate(834.877000,777.305000)"><path stroke="#191919" d="M.0,.0L.0,-30.0" stroke-width="1" fill="none"/><path stroke-linecap="round" stroke="#191919" d="M-3.0,-30.0L.0,-36.0L3.0,-30.0L-3.0,-30.0" stroke-width="1" fill="#191919"/></g><g id="shape14" transform="translate(592.500000,936.604000)"><path d="M.0,.0L482.0,.0L482.0,105.0L.0,105.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,70.0L482.0,70.0L.0,70.0z" fill-rule="nonzero" fill="#62bc85"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,105.0L.0,105.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,70.0L482.0,70.0L.0,70.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="181.5" y="22.0">MiddlewareBuilder</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="92.0">(m MiddlewareBuilder) Build() web.Middleware</tspan></text></g><g id="shape15" transform="translate(592.500000,265.500000)"><path d="M.0,.0L482.0,.0L482.0,285.0L.0,285.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,175.0L482.0,175.0L.0,175.0z" fill-rule="nonzero" fill="#ffffff"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,285.0L.0,285.0L.0,.0zM.0,35.0L482.0,35.0L.0,35.0zM.0,175.0L482.0,175.0L.0,175.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="216.5" y="22.0">Context</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="57.0">Req            *http.Request</tspan><tspan x="4.0" y="72.0">Resp           http.ResponseWriter</tspan><tspan x="4.0" y="87.0">RespData       []byte</tspan><tspan x="4.0" y="102.0">RespStatusCode int</tspan><tspan x="4.0" y="117.0">param          map[string]string</tspan><tspan x="4.0" y="132.0">cacheQuery     url.Values</tspan><tspan x="4.0" y="147.0">MatchedRoute   string</tspan><tspan x="4.0" y="162.0">RenderEngine   RenderEngine</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="197.0">(c *Context) SetCookie(ck *http.Cookie)</tspan><tspan x="4.0" y="212.0">(c *Context) RespJSON(status int, val any)</tspan><tspan x="4.0" y="227.0">(c *Context) BindJSON(val any) error</tspan><tspan x="4.0" y="242.0">(c *Context) FormValue(key string) StringValue</tspan><tspan x="4.0" y="257.0">(c *Context) QueryValue(key string) StringValue</tspan><tspan x="4.0" y="272.0">(c *Context) PathValue(key string) StringValue</tspan></text></g><g id="shape16" transform="translate(592.500000,1095.900000)"><path d="M.0,.0L482.0,.0L482.0,130.0L.0,130.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" fill-rule="nonzero" fill="#38aac1"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,130.0L.0,130.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="195.5" y="22.0">&lt;&lt;interface>></tspan><tspan x="223.5" y="37.0">Store</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="72.0">Generate(ctx context.Context, id string) (Session, error)</tspan><tspan x="4.0" y="87.0">Refresh(ctx context.Context, id string) error</tspan><tspan x="4.0" y="102.0">Remove(ctx context.Context, id string) error</tspan><tspan x="4.0" y="117.0">Get(ctx context.Context, id string) (Session, error)</tspan></text></g><g id="shape17" transform="translate(592.500000,1249.600000)"><path d="M.0,.0L482.0,.0L482.0,115.0L.0,115.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" fill-rule="nonzero" fill="#38aac1"/><path stroke="#323232" d="M.0,.0L482.0,.0L482.0,115.0L.0,115.0L.0,.0zM.0,50.0L482.0,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="195.5" y="22.0">&lt;&lt;interface>></tspan><tspan x="216.5" y="37.0">Session</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.0" y="72.0">Get(ctx context.Context, key string) (any, error)</tspan><tspan x="4.0" y="87.0">Set(ctx context.Context, key string, val any) error</tspan><tspan x="4.0" y="102.0">ID() string</tspan></text></g><g id="shape18" transform="translate(592.500000,1388.310000)"><path d="M.0,.0L481.7,.0L481.7,115.0L.0,115.0L.0,.0zM.0,50.0L481.7,50.0L.0,50.0z" fill-rule="nonzero" fill="#38aac1"/><path stroke="#323232" d="M.0,.0L481.7,.0L481.7,115.0L.0,115.0L.0,.0zM.0,50.0L481.7,50.0L.0,50.0z" stroke-width="1" fill="none"/><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="195.3" y="22.0">&lt;&lt;interface>></tspan><tspan x="205.8" y="37.0">Propagator</tspan></text><text style="fill:#191919;font-family:Consolas;font-size:10.00pt" xml:space="preserve"><tspan x="4.3" y="72.0">Inject(id string, writer http.ResponseWriter) error</tspan><tspan x="4.3" y="87.0">Extract(req *http.Request) (string, error)</tspan><tspan x="4.3" y="102.0">Remove(writer http.ResponseWriter) error</tspan></text></g></svg></div><div id="copyright">以上内容仅代表作者本人观点，不代表亿图图示立场。</div></div><div id="navBar"><div id="nav-thumbs"><div class="nav-thumb"><div><span class="number"><span class="pagenum">1</span></span><a href="#page1"><img src=""/></a></div><p>Page-1</p></div></div></div></div><script>
        const svgs=document.getElementById("svg-container").children;
        const UA=window.navigator.userAgent;
        const ua=(UA.indexOf('rv:11')+UA.indexOf('Firefox'))>=0;
        const svgcount=document.getElementById('svg-container').childElementCount;
        var styleArr=[];
        var heightArr=[];
        var navBar=document.getElementById('navBar');
        var conInfo=document.getElementById('content-info');
        for(var i=0;i<svgcount;i++){
            styleArr[i] = {width:svgs[i].getAttribute('width'),height:svgs[i].getAttribute('height')}
        }
        window.onresize=function () {
            renavstyle();
            resvgstyle();
        };
        window.onscroll=renavstyle;
        window.onload=function () {
            renavstyle();
            var sideWidth=navBar.offsetWidth;
            document.getElementById('content-info').style.marginRight=sideWidth+'px';
            document.getElementById('main-content').style.marginRight=sideWidth+'px';
            resvgstyle();
            doscroll();
        };
        function recontainstyle() {
            var topHeight=conInfo.clientHeight;
            var svgHeight=0;
            for(var i=0;i<svgcount;i++){
                heightArr[i]=svgs[i].getBoundingClientRect().height+10;
                svgHeight+=svgs[i].clientHeight ||svgs[i].getBoundingClientRect().height;
            }
            var fullHeight=svgHeight+Number(topHeight);
            if(fullHeight<window.innerHeight){
            document.getElementById('copyright').style.position='absolute';
            document.getElementById('copyright').style.transform ='translateX(-50%)';
            document.getElementById('main-content').style.position='absolute';
            document.getElementById('main-content').style.top=topHeight+'px';
        }else{
            document.getElementById('copyright').style.position='';
            document.getElementById('copyright').style.transform ='';
            document.getElementById('main-content').style.position='';
        }
        }
        function resvgstyle() {
            var sideWidth=navBar.offsetWidth+20;
            for(var i=0;i<svgcount;i++){
                var oriWidth = styleArr[i].width;
                var oriHeight = styleArr[i].height;
                var percent = oriHeight / oriWidth;
                var innerWidth=document.body.offsetWidth-sideWidth;
                if (innerWidth <= oriWidth) {
                    svgs[i].removeAttribute('width');
                    svgs[i].removeAttribute('height');
                    if (ua) {
                        svgs[i].setAttribute('height',innerWidth*percent);
                    }
                }else {
                    svgs[i].setAttribute('width', oriWidth);
                    svgs[i].setAttribute('height', oriHeight);
                }
            }
            recontainstyle();
        }
        function renavstyle() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            if(scrollTop>topHeight){
                document.getElementById('navBar').style.top=0+'px';
            }else{
                document.getElementById('navBar').style.top=topHeight-scrollTop+'px';
            }
            doscroll();
        }
        function doscroll() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            for(var i=0;i<svgcount;i++){
                var sum=0;
                for(var j=0;j<=i;j++){
                    sum+=heightArr[j];
                }
                if(scrollTop+window.innerHeight/2-topHeight-sum<0){
                    var sub=Number(i)+1;
                    if(document.querySelector('#nav-thumbs .selected')){
                        document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                    }
                    if(document.querySelector('.nav-thumb:nth-of-type('+sub+')')){
                        document.querySelector('.nav-thumb:nth-of-type('+sub+')').classList.add('selected');
                    }
                    break;
                }
            }
        }
        var navs=document.querySelectorAll('.nav-thumb');
        for(i=0;i<navs.length;i++){
            navs[i].children[0].onclick=function () {
                document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                this.parentNode.classList.add('selected');
            }
        }
</script></body></html>